<template>
    <div>
        <el-upload
            ref="upload"
            action="http://localhost:3300/upload"
            :on-remove="handleRemove"
            :on-preview="handlePreview"
            :limit="1"
            class="upload-demo"
            :file-list="fileList"
            :auto-upload="false"
            :on-success="uploadHandle"
        >

            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            <img :src="imgUrl" alt="">
<!--            <img src="../../../mock/upload/1581912564517-QQ图片20200203090343.png" alt="">-->


        </el-upload>
    </div>
</template>

<script>
    export default {
        name: "productUpload",
        data(){
            return{
                fileList:[],
                imgUrl:''
            }
        },
        methods:{
            submitUpload(){
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList){
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            // 上传成功
            uploadHandle(response,file,fileList){
                this.imgUrl = response.url.replace(/\\/g,'/');
                console.log(this.imgUrl);

                this.$emit("ImgVisible",response)
            }
        }
    }
</script>

<style scoped>

</style>